<template>
  <div class="div">
    <div class="div1">
      <el-button type="primary" style="float: right" @click="add">手机型号</el-button>
    </div>
    <Tables :items="items" :butFlag="butFlag" :list="list" :loading="loading" :rules="rules" :high="high"
            @show="show" :editForm="editForm" @update="update" @del="del" :options="opti"/>

    <el-dialog title="添加" v-model="addForms" :close-on-click-modal="false"
               style="width: 758px;margin: 104px auto" @close="unset('addForm')">
      <el-form :model="addForm" label-width="80px" ref="addForm" :rules="rules">
        <el-form-item label="手机型号" prop="type">
          <el-input v-model="addForm.type" auto-complete="off" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="手机厂商" prop="phoneComm">
          <el-select style="width: 200px" v-model="addForm.phoneComm" clearable
                     placeholder="请选择">
            <el-option
              v-for="i in opti"
              :key="i.value"
              :label="i.label"
              :value="i.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="unset('addForm')">取消</el-button>
        <el-button type="primary" @click.native="addSubmit('addForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Tables from '../components/Tables.vue'
  import axios from 'axios'
  import Que  from '../components/Que.vue'
  import moment from 'moment'
  import {mapState} from 'vuex'
  export default{
    name: 'Type',
    components: {
      Que,
      Tables
    },
    data () {
      return {
        list: [],
        high: 0,
        loading: false,
        butFlag: true,
        items: [
          {
            prop: 'id',
            label: '编号',
            add: false,
            table: true,
            edit: false
          },
          {
            prop: 'type',
            label: '手机型号',
            add: true,
            table: true,
            edit: true
          },
          {
            prop: 'createDate',
            label: '创建时间',
            add: false,
            table: true,
            edit: false,
            meth: function (row, column) {
              var date = row[column.property]
              if (date === null) {
                return date
              } else {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
              }
            }
          },
          {
            prop: 'phoneComm',
            label: '手机厂商',
            add: true,
            table: true,
            edit: true,
            options: '0',
            optioo: '0'
          }
        ],
        rules: {
          type: [
            {required: true, message: '请填写手机版本号', trigger: 'blur'},
            { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
          ],
          phoneComm: [
            {required: true, message: '请选择手机厂商', trigger: 'blur'}
          ]
        },
        editForm: {
          type: '',
          phoneComm: '',
          id: ''
        },
        addForms: false,
        addForm: {
          type: '',
          phoneComm: ''
        },
        opti: []
      }
    },
    mounted () {
      this.get()
      this.getPhone()
      this.high = window.innerHeight - 150
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    methods: {
      handleCurrentChange (val) {
        this.page = val
//        this.get()
      },
      handleSizeChange (val) {
        this.pagesize = val
//        this.get()
      },
      addSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios({
              method: 'get',
              url: `${this.BASE_URL}/types/add`,
              responseType: 'json',
              params: {
                type: this.addForm.type,
                phoneComm: this.addForm.phoneComm
              }
            }).then((response) => {
              this.addForms = false
              this.list = response.data.data
              this.$message('添加成功')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      show (msg) {
        this.editForm.type = msg.type
        this.editForm.phoneComm = msg.phoneComm
        this.editForm.id = msg.id
      },
      update (msg) {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/types/refresh`,
          responseType: 'json',
          params: {
            id: msg.id,
            type: msg.type,
            phoneComm: msg.phoneComm
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.loading = false
            this.list = response.data.data
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      del (msg) {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/types/del`,
          responseType: 'json',
          params: {
            id: msg.id
          }
        }).then((response) => {
          this.loading = false
          this.list = response.data.data
          this.$message('删除成功')
        }).catch(() => {
          this.loading = false
        })
      },
      add () {
        this.addForms = true
      },
      handlePreview (res, file) {
        this.addForm.fileName = res
      },
      remove (file, fileList) {
        this.addForm.fileName = undefined
      },
      beforeUp (file) {
        return true
      },
      unset (formName) {
        this.addForms = false
        this.$refs[formName].resetFields()
        this.fileList = []
      },
      get () {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/types/getAll`,
          responseType: 'json'
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.list = response.data.data
            this.loading = false
          } else {
            this.loading = false
            this.$alert('没有相关内容', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      getPhone () {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/phone/getAlls`,
          responseType: 'json'
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.opti = response.data.data
          } else {
            this.loading = false
            this.$alert('获取厂商列表错误', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style scoped>
  .div1 {
    width: 100%;
    height: 50px;
    /*padding-top: 10px;*/
    float: right;
  }
</style>
